<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="head">
        <script type="text/javascript">
            function skinChart() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#FBB040', '#1C75BC'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#F1F2F2',
                    gridLineColor: '#E8E8E8',
                    shadow: false,
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#778D9B'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    markerOptions: {
                        shadow: false
                    }
                }
            }

            function skinPie() {
                this.cfg.seriesColors = ['#dae8ef', '#27aae1', '#33ccff', '#9fadb5'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#eaeaea',
                    gridLineColor: '#e5ebf0',
                    shadow: false,
                    borderWidth: 0
                };
                this.cfg.seriesDefaults.shadow = false;
            }
        </script>
        <style type="text/css">
            .jqplot-target, .jqplot-axis {
                color: #778D9B;
            }
        </style>
    </ui:define>

    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox redback white">
                    <div class="Wid60 DispBlock Fleft">
                        <i class="fa fa-twitter Fs40 Fleft MarRight10 ShowOnDesktop"/>
                        <a href="#" class="Fs18 Wid70 DispInBlock MarTop5 Fleft white" style="line-height:18px;">
                            <i class="fa fa-twitter Fs20 Fleft MarRight10 ShowOnMobile"/> ' Ronin began trading on the DowJones Stock Exchange '
                        </a>
                        <span class="Fs12 Wid70 DispBlock Fleft ShowOnDesktop">#PrimeFaces #Ronin - @TheNewYorkTimes</span>
                    </div>

                    <div class="Wid40 Fright">
                        <a href="#" class="Fright white Fs18 DispInlBlock FontDosisRegular HoverEffect TexAlRight" style="padding:5px 10px;"><i class=" icon-notifications-on Fs20"/> 12 Tasks</a>
                        <a href="#" class="Fright white Fs18 DispInlBlock FontDosisRegular HoverEffect TexAlRight" style="padding:5px 10px;"><i class=" icon-message Fs20"/> 8 New Messages</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100 Responsive50 ">
            <div class="Row">
                <div class="Container25 Responsive50">
                    <div class="ContainerIndent">
                        <div class="ShadowBox whiteback RedBorderedBox" style="min-height:200px">
                            <div class="Container100">
                                <div class="ContainerIndent">
                                    <i class="fa fa-user navyblue Fs60 Fleft MarRight10"/>
                                    <span class="DispBlock red Fs26" style="line-height:26px;">David Williams, Welcome</span>
                                    <span class="navyblue Fs14">Sr. Marketing Manager</span>
                                </div>
                            </div>
                            <div class="Container33 Responsive100">
                                <div class="ContainerIndent">
                                    <a href="#" class="ShadowBox HoverEffect blueback white TexAlCenter"><i class="icon-calendar2 Fs30 DispBlock"/><span class="Fs12">Reminder</span></a>
                                </div>
                            </div>
                            <div class="Container33 Responsive100">
                                <div class="ContainerIndent">
                                    <a href="#" class="ShadowBox HoverEffect blueback white TexAlCenter"><i class="icon-addressbook2 Fs30 DispBlock"/><span class="Fs12">Contacts</span></a>
                                </div>
                            </div>
                            <div class="Container33 Responsive100">
                                <div class="ContainerIndent">
                                    <a href="#" class="ShadowBox HoverEffect blueback white TexAlCenter"><i class="icon-tie Fs30 DispBlock"/><span class="Fs12">Meetings</span></a>
                                </div>
                            </div>
                            <div class="EmptyBox20"/>
                        </div>
                    </div>
                </div>
                <div class="Container25 Responsive50 ">
                    <div class="ContainerIndent ">
                        <div class="ShadowBox whiteback NavyBlueBorderedBox" style="min-height:200px">
                            <div class="Container100">
                                <div class="ContainerIndent">
                                    <h2 class="Fs26 navyblue DispInlBlock FontDosisRegular Fleft" style="line-height:26px;">Total Orders</h2>
                                    <i class="icon-clipboard Fright navyblue Fs30"/>
                                </div>
                            </div>
                            <div class="Container50 Responsive100">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs20 FontDosisRegular leaden">This Month</span>
                                    <div class="EmptyBox10"/>
                                    <span class="DispBlock Fs40 leaden" style="line-height:40px;">2,523</span>
                                    <span class="DispBlock Fs16 FontDosisLight green">New Orders +26%</span>
                                </div>
                            </div>
                            <div class="Container50 Responsive100">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs20 FontDosisRegular leaden">This Year</span>
                                    <div class="EmptyBox10"/>
                                    <span class="DispBlock Fs40 leaden" style="line-height:40px;">4,975</span>
                                    <span class="DispBlock Fs16 FontDosisLight red">New Orders -37%</span>
                                </div>
                            </div>
                            <div class="EmptyBox20"/>
                        </div>
                    </div>
                </div>
                <div class="Container25 Responsive100 ">
                    <div class="ContainerIndent ">
                        <div class="ShadowBox whiteback NavyBlueBorderedBox" style="min-height:200px">
                            <div class="Container100">
                                <div class="ContainerIndent">
                                    <h2 class="Fs26 navyblue DispInlBlock FontDosisRegular Fleft" style="line-height:26px;">Total Showroom Visits</h2>
                                    <i class="icon-local-mall Fright navyblue Fs30"/>
                                </div>
                            </div>
                            <div class="Container33 Responsive50">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs18 FontDosisRegular leaden">Just Today</span>
                                    <div class="EmptyBox10"/>
                                    <span class="DispBlock Fs30 leaden" style="line-height:30px;">2,367</span>
                                    <span class="DispBlock Fs14 FontDosisLight green">Visitors +5%</span>
                                </div>
                            </div>
                            <div class="Container33 Responsive50">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs18 FontDosisRegular leaden">This Week</span>
                                    <div class="EmptyBox10"/>
                                    <span class="DispBlock Fs30 leaden" style="line-height:30px;">18,107</span>
                                    <span class="DispBlock Fs14 FontDosisLight orange">Visitors 7%</span>
                                </div>
                            </div>
                            <div class="Container33 Responsive50">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs18 FontDosisRegular leaden">This Month</span>
                                    <div class="EmptyBox10"/>
                                    <span class="DispBlock Fs30 leaden" style="line-height:30px;">81,451</span>
                                    <span class="DispBlock Fs14 FontDosisLight red">Visitors -3%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Container25 Responsive100 ">
                    <div class="ContainerIndent ">
                        <div class="ShadowBox whiteback NavyBlueBorderedBox" style="min-height:200px">
                            <div class="Container100">
                                <div class="ContainerIndent">
                                    <h2 class="Fs26 navyblue DispInlBlock FontDosisRegular Fleft" style="line-height:26px;">Total Income</h2>
                                    <i class="icon-safe Fright navyblue Fs30"></i>
                                </div>
                            </div>
                            <div class="Container50 Responsive50">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs18 FontDosisRegular leaden">Today</span>
                                    <span class="DispBlock Fs24 green" style="line-height:24px;">$ 45,340</span>
                                </div>
                            </div>
                            <div class="Container50 Responsive50">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs18 FontDosisRegular leaden">This Week</span>
                                    <span class="DispBlock Fs24 blue" style="line-height:24px;">$ 165,340</span>
                                </div>
                            </div>
                            <div class="Container50 Responsive50">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs18 FontDosisRegular leaden">This Month</span>
                                    <span class="DispBlock Fs24 blue" style="line-height:24px;">$ 1,415,810</span>
                                </div>
                            </div>
                            <div class="Container50 Responsive50">
                                <div class="ContainerIndent">
                                    <span class="DispBlock Fs18 FontDosisRegular leaden">This Year</span>
                                    <span class="DispBlock Fs24 orange" style="line-height:24px;">$ 7,115,324</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100 Responsive50">
            <div class="Container40 Responsive100">
                <div class="ContainerIndent">
                    <div class="ShadowBox whiteback">
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <p:treeTable value="#{ttSelectionView.root3}"
                                             var="document"
                                             selectionMode="checkbox"
                                             selection="#{ttSelectionView.selectedNodes2}">
                                    <f:facet name="header">
                                        Sales Documents
                                    </f:facet>
                                    <p:column headerText="Name">
                                        <h:outputText value="#{document.name}" />
                                    </p:column>
                                    <p:column headerText="Size">
                                        <h:outputText value="#{document.size}" />
                                    </p:column>
                                    <p:column headerText="Select">
                                        <h:outputText value="#{document.type}" />
                                    </p:column>
                                </p:treeTable>

                                <div class="EmptyBox10"/>
                                <p:commandButton value="E-Mail" styleClass="Fright GreenButton" icon="fa fa-envelope Fs14 white"/>
                                <p:commandButton value="Print" styleClass="Fright BlueButton" icon="fa fa-print Fs14 white"/>
                            </div>
                        </div>
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <p:treeTable value="#{ttSelectionView.root1}"
                                             var="document"
                                             selectionMode="single"
                                             selection="#{ttSelectionView.selectedNode}"
                                             style="margin-top:0">
                                    <f:facet name="header">
                                        Showroom Reports
                                    </f:facet>
                                    <p:column headerText="Name">
                                        <h:outputText value="#{document.name}" />
                                    </p:column>
                                    <p:column headerText="Size">
                                        <h:outputText value="#{document.size}" />
                                    </p:column>
                                    <p:column headerText="Type">
                                        <h:outputText value="#{document.type}" />
                                    </p:column>
                                </p:treeTable>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Container40 Responsive100">
                <div class="ContainerIndent">
                    <div class="ShadowBox whiteback">
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <span class="DispBlock navyblue Fs26 Fleft MarBot10" style="line-height:26px;">Annual Sales Chart</span>
                                <div class="Wid50 Fright Responsive100">
                                    <h:form>
                                        <p:splitButton value="Chart Type" icon="fa fa-bar-chart white Fs14" styleClass="Fright">
                                            <p:menuitem value="Line" icon="fa fa-line-chart" />
                                            <p:menuitem value="Bar" icon="fa fa-bar-chart" />
                                            <p:menuitem value="Pie" icon="fa fa-pie-chart" />
                                            <p:menuitem value="Area" icon="fa fa-area-chart" />
                                        </p:splitButton>
                                    </h:form>
                                </div>
                            </div>
                        </div>
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <p:chart type="line"
                                         model="#{chartView.lineModel}"
                                         responsive="true"
                                         style="height:300px;"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Container20 Responsive100">
                <div class="ContainerIndent">
                    <div class="ShadowBox orangeback">
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <span class="DispBlock navyblue Fs26 TexAlCenter" style="line-height:26px;"><i class="icon-drop"></i> Weekly Weather Forecasts</span>
                                <div class="EmptyBox20"/>
                                <div class="Container50 TexAlCenter navyblue">
                                    <i class="icon-cloudy DispBlock Fs50 animated rubberBand"/>
                                    <span class="Fs12 DispBlock">Today Cloudy</span>
                                    <span class="Fs24 DispBlock" style="line-height:24px;">14 <sup class="Fs12">o</sup>C</span>
                                </div>
                                <div class="Container50 TexAlCenter navyblue">
                                    <i class="icon-lightning3 DispBlock Fs50 animated rubberBand"/>
                                    <span class="Fs12 DispBlock">Tomorrow Lightning</span>
                                    <span class="Fs24 DispBlock" style="line-height:24px;">10 <sup class="Fs12">o</sup>C</span>
                                </div>
                                <div class="EmptyBox20"/>
                                <div class="Container50 TexAlCenter navyblue">
                                    <i class="icon-rainy2 DispBlock Fs50 animated rubberBand"/>
                                    <span class="Fs12 DispBlock">Sunday Rainy</span>
                                    <span class="Fs24 DispBlock" style="line-height:24px;">8 <sup class="Fs12">o</sup>C</span>
                                </div>
                                <div class="Container50 TexAlCenter navyblue">
                                    <i class="icon-snowy3 DispBlock Fs50 animated rubberBand"/>
                                    <span class="Fs12 DispBlock">Monday Snowy</span>
                                    <span class="Fs24 DispBlock" style="line-height:24px;">5 <sup class="Fs12">o</sup>C</span>
                                </div>
                                <div class="EmptyBox50"/>
                                <div class="Wid100 TexAlCenter">
                                    <h:form>
                                        <p:splitButton value="İstanbul" icon="fa fa-map-marker white Fs14">
                                            <p:menuitem value="İstanbul" icon="fa fa-map-marker" />
                                            <p:menuitem value="New York" icon="fa fa-map-marker" />
                                            <p:menuitem value="Sao Paulo" icon="fa fa-map-marker" />
                                            <p:menuitem value="Tokyo" icon="fa fa-map-marker" />
                                            <p:menuitem value="Berlin" icon="fa fa-map-marker" />
                                            <p:menuitem value="Paris" icon="fa fa-map-marker" />
                                            <p:menuitem value="Sydney" icon="fa fa-map-marker" />
                                        </p:splitButton>
                                    </h:form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container40 Responsive100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <span class="DispBlock navyblue Fs22 Fleft Wid100" style="line-height:22px;">Chat With Staff <i class="icon-forum Fright leaden"/></span>
                            <div class="EmptyBox20"/>
                            <div class="Container100">
                                <div class="Wid60 Fleft WidAutoOnMobile MarBot10">
                                    <p:selectOneMenu id="people" styleClass="Fleft" style="margin-right:4px; width:60px;">
                                        <f:selectItem itemLabel="To;" itemValue="To;" />
                                        <f:selectItem itemLabel="John Stanley" itemValue="John Stanley" />
                                        <f:selectItem itemLabel="Jack Logan" itemValue="Jack Logan" />
                                        <f:selectItem itemLabel="Ashley Olson" itemValue="Ashley Olson" />
                                    </p:selectOneMenu>
                                    <div class="EmptyBox10"/>
                                    <p:inputText placeholder="Message" styleClass="Fleft WidAuto"/>
                                </div>
                                <div class="Wid40 TexAlRight Fright WidAutoOnMobile FloatNoneOnMobile MarBot10">
                                    <p:button value="Send"/>
                                    <p:button value="Clear" styleClass="RedButton"/>
                                </div>

                                <div class="Wid100 OvHidden">
                                    <h:form>
                                        <p:tabView styleClass="OvHidden">
                                            <p:tab title="John Stanley">
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlLeft Fleft">
                                                    <div class="EmptyBox10"/>
                                                    <i class="fa fa-user leaden Fs26"/>
                                                    <span class="leadenback BordRad15 DispInlBlock white" style="padding:5px 15px;">What about John how are you?</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlRight Fright">
                                                    <div class="EmptyBox10"/>
                                                    <span class="orangeback BordRad15 DispInlBlock white" style="padding:5px 15px;">Hey David , very fine. How about you ?</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlRight Fright">
                                                    <div class="EmptyBox10"/>
                                                    <span class="orangeback BordRad15 DispInlBlock white" style="padding:5px 15px;">You would send sales reports . What is the situation ?</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlLeft Fleft">
                                                    <div class="EmptyBox10"/>
                                                    <i class="fa fa-user leaden Fs26"/>
                                                    <span class="leadenback BordRad15 DispInlBlock white" style="padding:5px 15px;">Today , I will be sending out within days</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlRight Fright">
                                                    <div class="EmptyBox10"/>
                                                    <span class="orangeback BordRad15 DispInlBlock white" style="padding:5px 15px;">Thanks a lot . See you, bye ..</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlRight Fright">
                                                    <div class="EmptyBox10"/>
                                                    <i class="icon-chat-3 orange Fs20 animated infinite bounceIn"/>
                                                </span>
                                                <span class="OvHidden Wid100 Fs16 DispBlock TexAlLeft Fleft">
                                                    <div class="EmptyBox10"/>
                                                    <i class="fa fa-user leaden Fs26 MarRight10"/>
                                                    <p:inputText placeholder="Message" styleClass=" Wid70 WidAutoOnMobile MarRight10"/>
                                                    <p:button icon="fa fa-thumbs-up Fs14 white"/>
                                                </span>
                                                <div class="EmptyBox10"/>
                                            </p:tab>
                                            <p:tab title="Jack Logan" closable="true">
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlLeft Fleft">
                                                    <div class="EmptyBox10"/>
                                                    <i class="fa fa-user leaden Fs26"/>
                                                    <span class="leadenback BordRad15 DispInlBlock white" style="padding:5px 15px;">Lorem ipsum dolor sit amet</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlRight Fright">
                                                    <div class="EmptyBox10"/>
                                                    <span class="orangeback BordRad15 DispInlBlock white" style="padding:5px 15px;">consectetur adipiscing elit</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlRight Fright">
                                                    <div class="EmptyBox10"/>
                                                    <span class="orangeback BordRad15 DispInlBlock white" style="padding:5px 15px;">Curabitur consequat nec augue viverra laoreet</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlLeft Fleft">
                                                    <div class="EmptyBox10"/>
                                                    <i class="fa fa-user leaden Fs26"/>
                                                    <span class="leadenback BordRad15 DispInlBlock white" style="padding:5px 15px;">Curabitur egestas malesuada quam</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlRight Fright">
                                                    <div class="EmptyBox10"/>
                                                    <span class="orangeback BordRad15 DispInlBlock white" style="padding:5px 15px;">Vestibulum ullamcorper id urna sit amet facilisis.</span>
                                                </span>
                                                <span class="OvHidden Wid70 Fs16 DispBlock TexAlRight Fright">
                                                    <div class="EmptyBox10"/>
                                                    <i class="icon-chat-3 orange Fs20 animated infinite fadeOut"/>
                                                </span>
                                                <span class="OvHidden Wid100 Fs16 DispBlock TexAlLeft Fleft">
                                                    <div class="EmptyBox10"/>
                                                    <i class="fa fa-user leaden Fs26 MarRight10"/>
                                                    <p:inputText placeholder="Message" styleClass=" Wid70 WidAutoOnMobile MarRight10"/>
                                                    <p:button icon="fa fa-thumbs-up Fs14 white"/>
                                                </span>
                                                <div class="EmptyBox10"/>
                                            </p:tab>
                                        </p:tabView>
                                    </h:form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container60 Responsive100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <span class="DispBlock navyblue Fs22 Fleft MarBot10" style="line-height:22px;">Monthly Store Reports</span>
                            <div class="Wid70 Fright Responsive100">
                                <p:selectOneMenu id="brand" styleClass="Fright MarBot10" style="width:80px; margin-right:4px;">
                                    <f:selectItem itemLabel="Filter By Brand" itemValue="" />
                                    <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                    <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                    <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                                </p:selectOneMenu>
                                <p:selectOneMenu id="color" styleClass="Fright MarBot10" style="width:80px; margin-right:4px;">
                                    <f:selectItem itemLabel="Filter By Color" itemValue="" />
                                    <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                    <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                    <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                                </p:selectOneMenu>
                                <p:selectOneMenu id="year" styleClass="Fright MarBot10" style="width:80px; margin-right:4px;">
                                    <f:selectItem itemLabel="Filter By Year" itemValue="" />
                                    <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                    <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                    <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                                </p:selectOneMenu>
                            </div>
                            <div class="Container100">
                                <h:form id="form">
                                    <p:dataTable id="singleDT"
                                                 var="car"
                                                 value="#{dtSelectionView.cars1}"
                                                 rows="6"
                                                 paginator="true"
                                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                                 rowsPerPageTemplate="6,10,15"
                                                 selectionMode="single"
                                                 selection="#{dtSelectionView.selectedCar}"
                                                 rowKey="#{car.id}">

                                        <p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()"/>

                                        <f:facet name="header">
                                            Car Sales Ranks
                                        </f:facet>
                                        <p:column headerText="Id" footerText="Id" sortBy="#{car.id}">
                                            <h:outputText value="#{car.id}" />
                                        </p:column>
                                        <p:column headerText="Year" footerText="Year" sortBy="#{car.year}">
                                            <h:outputText value="#{car.year}" />
                                        </p:column>
                                        <p:column headerText="Brand" footerText="Brand" sortBy="#{car.brand}">
                                            <h:outputText value="#{car.brand}" />
                                        </p:column>
                                        <p:column headerText="Color" footerText="Color" sortBy="#{car.color}">
                                            <h:outputText value="#{car.color}" />
                                        </p:column>
                                    </p:dataTable>

                                    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                                        <p:outputPanel id="carDetail" style="text-align:center;">
                                            <h:panelGrid columns="2" rendered="#{not empty dtSelectionView.selectedCar}">
                                                <f:facet name="header">
                                                    <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                                                </f:facet>

                                                <h:outputText value="Id:" style="font-weight: bold"/>
                                                <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                                                <h:outputText value="Year" style="font-weight: bold"/>
                                                <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                                                <h:outputText value="Color:" style="font-weight: bold"/>
                                                <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                                                <h:outputText value="Price" style="font-weight: bold"/>
                                                <h:outputText value="$#{dtSelectionView.selectedCar.price}" />
                                            </h:panelGrid>
                                        </p:outputPanel>
                                    </p:dialog>
                                </h:form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <span class="DispBlock navyblue Fs22 Fleft Wid100" style="line-height:22px;">The Best Seller Vehicles Of The Month <i class="fa fa-trophy Fright"/></span>
                            <div class="EmptyBox20"/>
                            <div class="Container50 Responsive100">
                                <div class="Container33 Responsive">
                                    <div class="ContainerIndent">
                                        <p:fieldset legend="AUDI R8" styleClass="TexAlCenter" toggleable="true">
                                            <h:graphicImage value="#{resource['demo:images/audi.png']}" class="Wid90 MarTop10" />
                                            <div class="EmptyBox30"/>
                                            <div class="Wid100 Fs20 leaden FontDosisRegular TexAlLeft">This Month</div>
                                            <div class="Wid100 Fs30 red FontDosisMedium TexAlLeft">$ 1,234,580</div>
                                        </p:fieldset>
                                    </div>
                                </div>
                                <div class="Container33 Responsive">
                                    <div class="ContainerIndent">
                                        <p:fieldset legend="Tesla Model S" styleClass="TexAlCenter" toggleable="true">
                                            <h:graphicImage value="#{resource['demo:images/tesla.png']}" class="Wid90 MarTop10" />
                                            <div class="EmptyBox30"/>
                                            <div class="Wid100 Fs20 leaden FontDosisRegular TexAlLeft">This Month</div>
                                            <div class="Wid100 Fs30 red FontDosisMedium TexAlLeft">$ 886,450</div>
                                        </p:fieldset>
                                    </div>
                                </div>
                                <div class="Container33 Responsive">
                                    <div class="ContainerIndent">
                                        <p:fieldset legend="Jaguar XF" styleClass="TexAlCenter" toggleable="true">
                                            <h:graphicImage value="#{resource['demo:images/jaguar.png']}" class="Wid90 MarTop10" />
                                            <div class="EmptyBox30"/>
                                            <div class="Wid100 Fs20 leaden FontDosisRegular TexAlLeft">This Month</div>
                                            <div class="Wid100 Fs30 red FontDosisMedium TexAlLeft">$ 786,120</div>
                                        </p:fieldset>
                                    </div>
                                </div>
                            </div>
                            <div class="Container50 Responsive100">
                                <div class="Container33 Responsive">
                                    <div class="ContainerIndent">
                                        <p:fieldset legend="Chevrolet Camaro" styleClass="TexAlCenter" toggleable="true">
                                            <h:graphicImage value="#{resource['demo:images/chevrolet.png']}" class="Wid90 MarTop10" />
                                            <div class="EmptyBox30"/>
                                            <div class="Wid100 Fs20 leaden FontDosisRegular TexAlLeft">This Month</div>
                                            <div class="Wid100 Fs30 red FontDosisMedium TexAlLeft">$ 546,330</div>
                                        </p:fieldset>
                                    </div>
                                </div>
                                <div class="Container33 Responsive">
                                    <div class="ContainerIndent">
                                        <p:fieldset legend="BMW X6" styleClass="TexAlCenter" toggleable="true">
                                            <h:graphicImage value="#{resource['demo:images/bmw.png']}" class="Wid90 MarTop10" />
                                            <div class="EmptyBox30"/>
                                            <div class="Wid100 Fs20 leaden FontDosisRegular TexAlLeft">This Month</div>
                                            <div class="Wid100 Fs30 red FontDosisMedium TexAlLeft">$ 476,890</div>
                                        </p:fieldset>
                                    </div>
                                </div>
                                <div class="Container33 Responsive">
                                    <div class="ContainerIndent">
                                        <p:fieldset legend="Aston Martin" styleClass="TexAlCenter" toggleable="true">
                                            <h:graphicImage value="#{resource['demo:images/tesla.png']}" class="Wid90 MarTop10" />
                                            <div class="EmptyBox30"/>
                                            <div class="Wid100 Fs20 leaden FontDosisRegular TexAlLeft">This Month</div>
                                            <div class="Wid100 Fs30 red FontDosisMedium TexAlLeft">$ 422,443</div>
                                        </p:fieldset>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>